<template>
  <div class="main">
    <div class="category">
      <el-tag size="medium" effect="plain">商品分类</el-tag>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="i in categoryList" :key="i.id" :label="i.type" :name="`${i.id}`">{{ i.type }}</el-tab-pane>
      </el-tabs>
    </div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">全部结果</el-breadcrumb-item>
      <el-breadcrumb-item>商品搜索</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 商品列表展示区域 -->
    <div class="goods-list">
      <GoodsList :props="goodsPropsName" :goods="goods"/>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          current-page.sync="currentPage2"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="paginationQuery.pageSize"
          layout="sizes, prev, pager, next"
          :total="goodsInfo.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {goodsRestful} from '@/api/goods'
import {goodsTypeRestful} from '@/api/goods-type'
import GoodsList from '@/components/GoodsList'

export default {
  name: '',
  components: {
    GoodsList
  },
  data() {
    return {
      goods: [],
      goodsInfo: {},
      categoryList: [],
      paginationQuery: {
        currentPage: 1,
        pageSize: 10
      },
      goodsQuery: {
        goodsName: this.$route.query.keyword || undefined,
        goodsType: this.$route.query.goodsType || undefined
      },
      goodsPropsName: {
        indexName: 'id',
        goodsId: 'id',
        coverName: 'coverUrl',
        titleName: 'goodsName',
        pulisherName: 'publisherName'
      },
      activeName: '1'
    }
  },
  methods: {
    handleSizeChange(val) {
      this.paginationQuery.pageSize = val;
      this.fetchGoods();
    },
    handleCurrentChange(val) {
      this.paginationQuery.currentPage = val;
      this.fetchGoods();
    },
    fetchGoods() {
      goodsRestful.fetchList(
          {...this.paginationQuery, ...this.goodsQuery})
          .then(({data, data: {records}}) => {
            this.goodsInfo = data;
            this.goods = records;
          })
    },
    fetchCategories() {
      goodsTypeRestful.fetchAll().then(({data}) => {
        this.categoryList = data;
      })
    },
    handleClick(tab, event) {
      this.goodsQuery.goodsType = Number(this._.get(this._.split(this._.get(event, 'target.id'), '-'), '1'));
      this.fetchGoods();
    }
  },
  watch: {
    '$route': 'fetchGoods'
  },
  created() {
    this.fetchGoods()
    this.fetchCategories()
  }
}
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;

  .category {
    width: 100%;
  }

  .el-tabs {
    display: inline-block;
    width: 82%;
    margin-left: 16px;
    margin-top: 12px;
  }

  .el-tag {
    overflow: hidden;
    vertical-align: top;
    height: 40px;
    line-height: 38px;
    margin-top: 13px;
  }

  .el-menu,
  .el-breadcrumb {
    display: inline-block;
    width: 80%;
  }
}
</style>
